<extend name="Layout:layout_content" />
<block name="body_main">
    <ul class="xsui-breadcrumb">
        <li><a href="{:U('attr_list')}"><i  class="fa fa-home fa-fw"></i>属性管理</a></li>
        <li class="current">新增属性</li>
    </ul>
    <h3 class="htitle">新增属性</h3>
    <form action="{:U('attr_add_save')}" method="post" class="xsui-form">
        <fieldset>
            <div class="xsui-form-field">
                <label>字段名称：</label>
                <input type="text" name="field_name" placeholder="字段英文名称/拼音" required="required" data-check-url="{:U('check_attr_name','name=varkey')}" />
                <span class="xsui-form-field-warning">(只能是字母或字母和数字的组合,而且必须字母开头,不能含空格或特殊字符,保存后不可更改,可用拼音)</span>
            </div>
            <div class="xsui-form-field">
                <label>字段标题：</label>
                <input type="text" name="title" placeholder="属性标题"  required="required" data-check-url="{:U('check_attr_title')}" />
                <span class="xsui-form-field-tip">(中文或英文,用于前台显示)</span>
            </div>
            <div class="xsui-form-field">
                <label>组件类型：</label>
                <sohtml:select name="options_input_type" items="varchar:字符输入框;int:数字输入框;decimal:小数输入框;email:邮件输入框;mobile:手机号码输入框;telphone:电话号码输入框;date:日期选择框(xxxx-xx-xx);datetime:日期和时间选择框(xxxx-xx-xx xx:xx:xx);time:时间选择框(xx:xx);select:下拉选择框;radio:单选框;checkbox:复选框;textarea:多行文本框;editor:可视化编辑器;file:文件上传框;" required="required" />
            </div>
            <div class="xsui-form-field" style="display: none;">
                <div style="margin-bottom:5px;"><label>配置内容：</label>(多个可选值以英文分号隔开,如：是;否;不确定)</div>
                <textarea cols="45" rows="3" name="options_content" placeholder="内容格式：是;否;不确定"></textarea>
            </div>
            <div class="xsui-form-field">
                <label>是否表单填写：</label>
                <input type="checkbox" name="is_form" value="Y"/>
            </div>
            <div class="xsui-form-field">
                <label>是否在表格中显示：</label>
                <input type="checkbox" name="is_list" value="Y"/>
            </div>
            <div class="xsui-form-field">
                <label>是否允许搜索：</label>
                <input type="checkbox" name="is_search" value="Y"/>
            </div>
            <div class="xsui-form-field">
                <label>是否导入字段：</label>
                <input type="checkbox" name="is_import" value="Y"/>
                <span class="xsui-form-field-tip">(Excel第一行的标题必须与 [字段标题] 一致!)</span>
            </div>
            <div class="xsui-form-field">
                <label>是否导出字段：</label>
                <input type="checkbox" name="is_export" value="Y"/>
            </div>
            <div class="xsui-form-field">
                <label>是否在来电弹屏表单显示：</label>
                <input type="checkbox" name="is_popup" value="Y"/>
            </div>
            <div class="xsui-form-field">
                <label>是否可用：</label>
                <sohtml:radio name="status" items="1:可用;0:禁用" value="1" required="required" />
            </div>
        </fieldset>
        <fieldset class="xsui-switch-fieldset">
            <legend><span class="xsui-switch">[+]</span>更多属性</legend>
            <div class="xsui-switch-content xsui-hidden">
                <div class="xsui-form-field">
                    <label>属性分组：</label>
                    <input type="text" name="group_name" value="基本资料" placeholder="属性分组" required="required" />
                    <span class="xsui-form-field-tip">(如：基本资料、联系方式)</span>
                </div>
                <div class="xsui-form-field">
                    <label>帮助提示：</label>
                    <input type="text" name="help_text" placeholder="帮助提示" size="30" />
                    <span class="xsui-form-field-tip">(如有填写,则界面上鼠标划过会显示帮助提示)</span>
                </div>
                <div class="xsui-form-field">
                    <label>字段备注：</label>
                    <input type="text" name="field_comment" placeholder="字段备注" size="30" />
                    <span class="xsui-form-field-tip">(对字段的辅助描述,不会显示在界面上)</span>
                </div>
                <div class="xsui-form-field">
                    <label>字段默认值：</label>
                    <input type="text" name="field_default" placeholder="字段默认值"/>
                </div>
            </div>
        </fieldset>
        <button type="submit" class="ui-state-default"><i class="fa fa-save"></i>保存</button>
        <button type="reset" class="ui-state-default">重置</button>
        <input type="hidden" name="site_id" value="{$login_data.site_id}" />
    </form>    
</block>
<block name="body_after">
    <script type="text/javascript">
        $('select[name="options_input_type"]').change(function () {
            inputTypeChange();
        })
        inputTypeChange();
        // 2014-11-10 by sutroon; 2015-1-5 by sutroon 新增类型自动匹配功能
        function inputTypeChange() {
            var val = $('select[name="options_input_type"]').val();
            switch (val) {
                case 'select':
                case 'radio':
                case 'checkbox':
                    $('textarea[name="options_content"]').parent().show();
                    break;
                default:
                    $('textarea[name="options_content"]').parent().hide();
                    break;
            }
        }
        // 检测字段名称 2016-1-19
        $('input[name="field_name"]').blur(function () {
            var $this = $(this);
            $.get($this.data('checkUrl').replace('varkey', $this.val()), function (data) {
                if (data) {
                    var msg = '字段名称 [' + $this.val() + '] 已被 [' + data + '] 使用!';
                    alert(msg);
                    $this.val('');
                    $(':submit').prop('disabled', true);
                } else {
                    $(':submit').prop('disabled', false);
                }
            })
        })
        // 检测属性标题 2016-1-19
        $('input[name="title"]').blur(function () {
            var $this = $(this);
            $.post($this.data('checkUrl'), {title: $this.val()}, function (data) {
                if (data) {
                    var msg = '属性标题 [' + $this.val() + '] 已存在, 您可以更改标题或修改已存在的标题！\n您确定要使用此名称吗!';
                    if (!confirm(msg)) {
                        $this.val('');
                    }
                }
            }
            )
        })
    </script>
</block>